<template>
  <div class="padding-left-right-20 padding-top-10">
    <div class="search-box relative-box">
      <el-input placeholder="请输入搜索内容" v-model="searchVal" @keyup.enter.native="getSource"></el-input>
      <el-button class="absolute-box search-btn" type="primary" icon="el-icon-search" @click="getSource"></el-button>
    </div>

    <el-table :border="false" stripe :data="tableData" class="new-table-style margin-top-20" @row-click="goInfo">
      <el-table-column align="left" label="合同周期" width="250">
        <template slot-scope="scope">
          <span>{{ scope.row.contractBeginDate | formatDateTime('YYYY-MM-DD') }}</span>
          <span>至</span>
          <span>{{ scope.row.contractEndDate | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="left" label="合同名称" prop="contractName"> </el-table-column>
      <el-table-column align="left" label="合同类型" prop="contractTypeName" width="160"> </el-table-column>
      <el-table-column align="left" label="客户简称" prop="leaserShopName"> </el-table-column>
    </el-table>

    <Pagination v-if="total" @change="pageChange" :total="total" :pageSize="pageSize" paginationLayout="total, prev, pager, next" />
  </div>
</template>

<script>
  import { apiContractHistoryList, apiContractCount } from '../../../api/contract';
  import { guid } from '@/common/js/utils';

  export default {
    name: 'mine',
    data() {
      return {
        searchVal: '',
        tableData: [],
        contractTypeList: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        projectKey:localStorage.getItem('projectKey')
      };
    },

    mounted() {
      this.getContractCount();
    },

    methods: {
      //数量 | 类型
      async getContractCount() {
        let res = await apiContractCount({
          countContractStage: true, //(是否查询合同阶段统计)
          contractStatusList: [2,3,4,5],
        });
        let list = []
        res.contractStageList.forEach(item => {
          list.push(...item.contractTypeList)
        })
        let target = list.find(item => item.contractParentType == this.$route.query.contractType)
        this.contractTypeList = target.contractTypeList || null
        this.getSource()
      },

      //table数据
      async getSource() {
        if (!this.contractTypeList) return
        let res = await apiContractHistoryList({
          currentPage:this.currentPage,
          pageSize:this.pageSize,
          likeLeaserShopName: this.searchVal,
          contractTypeList:this.contractTypeList,
          projectKey:this.projectKey,
          contractStatusList: [2,4,5],
        });
        this.tableData = res.rows || []
        this.total = res.total || 0
      },

      //详情
      goInfo(row) {
        let param = {
          contractType: row.contractType,
          contractCode: row.contractCode,
          contractKey: row.primaryKey,
          contractCategory: row.contractCategory,
          headerName: '合同管理',
          showApprove: "no"
        };
        let pathUrl = {
          name: 'contract-info',
          query: param,
        };
        let { href } = this.$router.resolve(pathUrl);
        let windowName = 'contractManageToHistoryInfo'
        window.open(href, windowName);
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getSource()
      },
    },
    components: {},
  };
</script>

<style lang="scss" scoped>
  .search-box {
    width: 700px;
    margin: 0 auto 20px;
    ::v-deep .el-input__inner {
      border-radius: 20px;
    }
    .search-btn {
      right: 3px;
      top: 3px;
      padding: 8px 16px;
      border-radius: 20px !important;
    }
  }
  ::v-deep .el-table__row {
    cursor: pointer;
  }
</style>
